import React, {Component} from "react";
import {observer,inject} from "mobx-react";
import {computed} from "mobx";

import {View} from "../component/index.jsx";
import {Select,Input,Button,Table} from "antd";
import {
  DeleteOutlined,
  EditOutlined,
  UserAddOutlined,
  DoubleLeftOutlined,
} from '@ant-design/icons';


const { Option } = Select;
const { Search } = Input;


// 商铺用户管理
@inject(["store"])
@observer
class UserMerchant extends Component{
  constructor(props){
    super(props);
    this.store = this.props.store;
    this.merchant = this.props.store.storeUserMerchant;
    this.authority = ["系统管理员","管理员"];
    
    // 初次执行
    if(!this.data){this.merchant.init();}
  }
  componentDidMount(){
    this.store.navigation({page:"Merchant"});
  }
  // 返回数据
  @computed get height() {return this.store.height;}
  @computed get merchantModule() {return this.store.merchantModule;}
  // 返回数据
  @computed get data() {return this.merchant.paging.data;}
  // 分页状态
  @computed get loading() {return this.merchant.loading;}
  // 操作
  @computed get form() {return this.merchant.form;}
  // 查询
  @computed get where() {return this.merchant.where;}
  // 分页
  @computed get pagination(){
    return {current:Number(this.merchant.paging.nowPage),total:Number(this.merchant.paging.maxNum),pageSize:Number(this.merchant.paging.num)};
  }
  render(){
    // 列表表格
    const columns = [
      {width:"10%",title: "用户编号",dataIndex: "id"},
      {width:"20%",title: "用户组",dataIndex: "authority",render:text=>(<span>{this.authority[Number(text)]}</span>)},
      {width:"20%",title: "用户名",dataIndex: "uname"},
      {width:"30%",title: "权限",dataIndex: "authoritylist",render:text=>{
        const arr = JSON.parse(text).map(item=>this.merchantModule[item]);
        return arr.join("/");
      }},
      {
        width:"20%",
        title: "相关操作",
        key: "form",
        render: (text ,record)=> {
          const obj = record;
          return (
            <div>
              <Button
                onClick={()=>this.merchant.modal("update",obj)}
                icon={<EditOutlined />} style={{marginRight:10}} 
                shape="circle"
                title="编辑"
              />
              <Button
                onClick={()=>this.merchant.delete(obj)}
                icon={<DeleteOutlined />}
                type="danger"
                shape="circle"
                title="删除"
              />
            </div>
          );
        }
      },
    ];
    // 分页列表
    const paging = (
      <div style={{flex:1,overflow:"hidden",height:this.height-50,padding:"0 5px"}}>
        <View 
          style={{
            borderBottom:"1px #eee solid",
            height:50,
            alignItems:"center",
            background:"#f2f2f2"
          }}
          >
          <Select
            defaultValue="uname"
            onChange={v=>this.merchant.set("where-field",v)}
            style={{width:"100px",margin:"0 5px"}}
            >
            <Option value="uname">用户名称</Option>
            <Option value="id">用户编号</Option>
          </Select>
          <Select
            defaultValue="="
            onChange={v=>this.merchant.set("where-condition",v)}
            style={{width:100,margin:"0 5px"}}
            >
            <Option value="=">等于查询</Option>
            <Option value="like">模糊查询</Option>
          </Select>
          <Search
            placeholder="输入查询内容"
            onSearch={value => this.merchant.find(value)}
            style={{ width: 250 }}
            value={this.where.value}
            onChange={(e)=>this.merchant.set("where-value",e.target.value)}
            enterButton
          />
          <Button onClick={()=>this.merchant.all()}  style={{margin:"0 5px 0 20px"}}>所有用户</Button>
          <Button
            // onClick={()=>this.merchant.modal("insert",{})}
            onClick={()=>this.merchant.set("form-condition","insert")}
            icon={<UserAddOutlined />}
            type="primary"
            style={{margin:"0 5px"}}
            >
            添加用户
          </Button>
        </View>
        <Table
          scroll={{y:this.height-220,x:"100%"}}
          loading={this.loading}
          rowKey={record => record.id}
          columns={columns}
          dataSource={this.data.slice(0)}
          pagination={this.pagination}
          onChange={pagination=>this.merchant.page(pagination.current)}
        />
      </div>
    );
    // 编辑内容
    const edit =(
      <View style={{flex:1,flexDirection:"column",padding:20}}>
        <div>
          <Button
            icon={<DoubleLeftOutlined />}
            onClick={()=>{
              this.merchant.set("form-condition","paging");
            }}
            type="link"
            >
            返回
          </Button>
        </div>
        <div style={{paddingTop:10,width:500}}>
          <Input
            disabled={this.form.loading}
            addonBefore="商铺编号"
            onChange={e=>this.merchant.set("form-data-sid",e.target.value)}
            value={this.form.data.sid}
          />
        </div>
        <div style={{paddingTop:10,width:500}}>
          <Input
            disabled={this.form.loading}
            addonBefore="用户名称"
            placeholder="20个字符以内"
            onChange={e=>this.merchant.set("form-data-uname",e.target.value)}
            value={this.form.data.uname}
          />
        </div>
        <div style={{paddingTop:10,width:500}}>
          <Input
            type="password"
            disabled={this.form.loading}
            addonBefore="用户密码"
            onChange={e=>this.merchant.set("form-data-pwd",e.target.value)}
          />
        </div>
        <div style={{paddingTop:10,width:500}}>
          <Select
            disabled={this.form.loading}
            onChange={v=>this.merchant.set("form-data-authority",v)}
            placeholder="选择账户类型"
            style={{width:"100%"}}
            value={`${this.form.data.authority}`}
            >
            <Option value="0">商铺管理员</Option>
            <Option value="1">客服</Option>
          </Select>
        </div>
        <div style={{paddingTop:10,width:500}}>
          <Select
            disabled={this.form.loading}
            onChange={v=>this.merchant.set("form-data-authoritylist",v)}
            mode="multiple"
            placeholder="可执行模块"
            style={{width:"100%"}}
            value={this.form.data.authoritylist}
            >
          {
            Object.keys(this.merchantModule).map(index=>(
              <Option value={index} key={index}>
              {this.merchantModule[index]}
              </Option>
            ))
          }
          </Select>
        </div>
        <div style={{paddingTop:30,width:500}}>
          <Button
            loading={this.form.loading}
            onClick={()=>this.merchant.submit()}
            style={{width:"100%"}}
            type="primary"
            size="large"
            >
            保存信息
          </Button>
        </div>
      </View>
    );

    return(
      <View style={{overflow:"hidden",height:this.height-50,width:"100%"}}>
      {this.form.condition==="paging"?paging:edit}
      </View>
    );
  }
}

export default UserMerchant;